<template>
  <!-- 新增角色 -->
  <el-dialog v-model="AdddialogVisible" title="Tips" width="1000px">
    <el-form :model="form" label-width="auto">
      <el-form-item label="角色名">
        <el-input v-model="form.role_Name" style="width: 200px;" placeholder="请输入角色名" />
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="form.role_Content" style="width: 200px;" placeholder="请输入备注" />
      </el-form-item>

      <el-form-item>
        <el-button @click="AdddialogVisible = false">取消</el-button>
        <el-button type="primary" @click="AddOppen()">新增</el-button>
      </el-form-item>

    </el-form>

  </el-dialog>
  <!-- 修改角色 -->
  <el-dialog v-model="UpdatedialogVisible" title="Tips" width="1000px">
    <el-form :model="formUpdate" label-width="auto">
      <el-form-item label="角色名">
        <el-input v-model="formUpdate.role_Name" style="width: 200px;" placeholder="请输入角色名" />
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="formUpdate.role_Content" style="width: 200px;" placeholder="请输入备注" />
      </el-form-item>

      <el-form-item>
        <el-button @click="UpdatedialogVisible = false">取消</el-button>
        <el-button type="primary" @click="EditAll()">修改</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>

  <el-form :inline="true" :model="formInline" class="demo-form-inline" @selection-change="handleSelectionChange">
    <el-form-item label="角色名">
      <el-input v-model="formInline.username" placeholder="请输入角色名" clearable />
    </el-form-item>

    <el-form-item label="备注">
      <el-input v-model="formInline.number" placeholder="请输入备注" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="Show()" style="width: 100px;">查询</el-button>
    </el-form-item>
  </el-form>

  <el-form :inline="true">
    <el-form-item>
      <el-button type="primary" @click="Open1()">新增</el-button>
      <el-button type="primary" @click="Edit(1)">编辑</el-button>
      <el-button type="primary" @click="DeleteAll()">删除</el-button>
      <el-button type="primary" @click="Show()">刷新</el-button>
      <el-button type="primary" @click="OppenExports()">导出</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column prop="role_Id" label="序号" width="auto">
      <template v-slot="scope">
        <el-checkbox-group v-model="addIds">
          <el-checkbox :value="scope.row.role_Id">{{ scope.row.role_Id }}</el-checkbox>
        </el-checkbox-group>
      </template>
    </el-table-column>
    <el-table-column prop="role_Name" label="角色名" width="auto" />
    <el-table-column prop="role_CreateTime" label="创建时间" width="auto" />
    <el-table-column prop="role_Content" label="备注" width="auto" />
    <el-table-column label="操作" width="auto">
      <template v-slot="scoped">
        <el-button type="text" @click="Edit(scoped.row.role_Id)">编辑</el-button>
        <el-button type="text" @click="Delete(scoped.row.role_Id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <table>
        <thead>
            <tr>
                <td>
                    <el-pagination v-model:current-page="Page.pageIndex" v-model:page-size="Page.pageSize"
                        :page-sizes="[15, 20, 30, 40]" :background="true"
                        layout="total, sizes, prev, pager, next, jumper,slot" :total="Page.total" prev-text="上一页"
                        next-text="下一页">
                        共{{ Page.total }}条，共{{ Page.pageIndex }}\{{ Page.totalPage }}页
                    </el-pagination>
                </td>
            </tr>
        </thead>
    </table>

  <div class="table-footer">
    <div class="batch-actions">
      <el-button size="small" @click="selectAll()">全选</el-button>
      <el-button size="small" @click="reverseSelect()">反选</el-button>
      <el-select size="small" placeholder="批量操作" style="width: 120px;">
        <el-option label="批量删除" value="delete" @click="DeleteAll()" />
        <el-option label="批量导出" value="export" @click="OppenExportsAll()" />
      </el-select>
    </div>
  </div>
</template>

<script lang="ts" setup>

import axios, { HttpStatusCode } from 'axios'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref, watch } from 'vue'
import { http } from '@/axios/axiosHelpers'
import { systeamread } from '@/systeamaxios/sysaxiosHelpers'
const AdddialogVisible = ref(false)
const UpdatedialogVisible = ref(false)
const LogExport = ref(false)
const addIds = ref<any>([])
const bt = reactive({
  bid: 0,
  bname: ""
})
//表格加入
const form = reactive({
    "role_Code": "",
  "role_Name": "",
  "role_CreateTime": "",
  "role_Content": "",
  "role_IsDel": false
})
const formUpdate = reactive({
  "role_Id": 0,
  "role_Code": "",
  "role_Name": "",
  "role_CreateTime": "",
  "role_Content": "",
  "role_IsDel": false
})
//表格加
const formInline = reactive({
  username: '',
  number: ''
})
const tableData = ref([{
  "role_Id": 0,
  "role_Code": "",
  "role_Name": "",
  "role_CreateTime": "",
  "role_Content": "",
  "role_IsDel": false
}])
const Page = reactive({
  pageIndex: 1,
  pageSize: 15,
  total: 0,
  totalPage: 0
})
const Open1 = () => {
  AdddialogVisible.value = true
}
onMounted(() => {
  Show()
})
watch(Page,()=>{
  Show()
})
const AddOppen = () => {
  // http.post("/managementsysteamreadapis/api/RoleAll/AddRole", form)
  systeamread.post("/api/RoleAll/AddRole", form)
    .then(res => {
      if (res.data.code > 0) {
        ElMessage.success(res.data.message)
        AdddialogVisible.value = false
        Show()
      }
      else {
        ElMessage.success(res.data.message)
      }
    })

}
const Show = () => {
  // http.get("/managementsysteamreadapis/api/RoleAll/ShowRole", {
  systeamread.get("/api/RoleAll/ShowRole", {
    params: {
      PageIndex: Page.pageIndex,
      PageSize: Page.pageSize,
      Role_Name: formInline.username,
      Role_Content: formInline.number
    }
  })
    .then(res => {
      tableData.value = res.data.data.data
      Page.total = res.data.total
        Page.totalPage = res.data.totalPage
    })
}
const EditAll = () => {
  formUpdate.role_Id = bt.bid
  http.put("/managementsysteamreadapis/api/RoleAll/UpdateRole", formUpdate)
    .then(res => {
      ElMessage.success(res.data.message)
      UpdatedialogVisible.value = false
      Show()
    })
}
const Edit = (id: number) => {
  UpdatedialogVisible.value = true
  bt.bid = id
}
//保存选中的id
const handleSelectionChange = (selection: any[]) => {
  addIds.value = selection.map(item => item.rabit_Id)
}
//全部选中id
const selectAll = () => {
  addIds.value = tableData.value.map(item => item.role_Id)
}
//反选
const reverseSelect = () => {
  addIds.value = tableData.value.filter(item => !addIds.value.includes(item.role_Id)).map(item => item.role_Id)
}
const OppenExports = () => {
  LogExport.value = true
}
const OppenExportsAll = () => {
  let url = "http://112.126.93.146:8000/managementsysteamreadapis/api/ExportAll/RoleExportAll?Ids=" + addIds.value.toString();
  window.location.href = url
  addIds.value = []
}
const Delete = (id: number) => {
  if (!confirm("确定删除吗"))
    return
  http.delete("/managementsysteamreadapis/api/RoleAll/GetRole", {
    params: {
      roleId: id
    }
  })
    .then(res => {
      ElMessage.success(res.data.message)
      Show()
    })
}
const DeleteAll = () => {
  if (!confirm("确定删除吗"))
    return;
  http.get("/managementsysteamreadapis/api/RoleAll/DelRoleAll", {
    params: {
      Ids: addIds.value.toString()
    }
  })
    .then(res => {
      ElMessage.success(res.data.message)
      Show()
    })
}
</script>